<template>
    <div class="container">
        <div class="row">
            <div class="col-md-7 mrgnbtm">
                <h2>创建用户</h2>
                <form>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label>姓名</label>
                            <input type="text" class="form-control" id="firstname" placeholder="First Name" />
                        </div>
                        <div class="form-group col-md-6">
                            <label>职业</label>
                            <input type="text" class="form-control" id="lastname" placeholder="Last Name" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label>邮箱</label>
                            <input type="text" class="form-control" id="email" placeholder="Email" />
                        </div>
                    </div>
                    <button type="button" class="btn btn-danger">创建</button>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'CreateUser',
    data() {
        return{
            firstName: '',
            lastName: '',
            email: ''
        }
    },
    methods: {
        createUser(){
            console.log(this.firstName)
            const payload = {
                firstName: this.firstName,
                lastName: this.lastName,
                email: this.email
            }
            this.$emit('createUser', payload)
            this.clearForm();
        },
        clearForm(){
            this.firstName = "";
            this.lastName = "";
            this.email = "";
        }
    }
}
</script>